import React, { memo, useRef, useState } from 'react'
import { HeaderWrapper, SearchAreaWrapper } from './style'
import HeaderLeft from './c-cpns/header-left'
import HeaderCenter from './c-cpns/header-center'
import HeaderRight from './c-cpns/header-right'
import { shallowEqual, useSelector } from 'react-redux'
import classNames from 'classnames'
import useScrollPosition from '@/hooks/useScrollPosition'
import { ThemeProvider } from 'styled-components'

const AppHeader = memo(() => {
  // 从 Redux 中获取数据
  const { headerConfig } = useSelector((state) => {
    return {
      headerConfig: state.main.headerConfig,
    }
  }, shallowEqual)

  // 是否固定定位、是否背景透明
  const { isFixed, topAlpha } = headerConfig

  // 当前是否处于搜索状态
  const [isSearch, setIsSearch] = useState(false)

  // 监听滚动
  const { scrollY } = useScrollPosition()
  const prevY = useRef(0)
  // 当搜索未打开时,不断记录当前页面滚动的位置
  if (!isSearch) {
    prevY.current = scrollY
  }
  // 当搜索打开时,则开始记录滚动的距离,当距离大于一定值时,关闭搜索
  // 取绝对值,防止是向上滚动
  if (isSearch && Math.abs(scrollY - prevY.current) > 30) {
    setIsSearch(false)
  }

  // 透明度逻辑: 透明度开启,并且页面没有进行滚动时
  const isAlpha = topAlpha && scrollY === 0

  return (
    // 使用 ThemeProvider,使 isAlpha,在整个组件和他的子组件中都可以获取到(便于调节字体颜色等)
    <ThemeProvider theme={{ isAlpha }}>
      <HeaderWrapper className={classNames({ fixed: isFixed })}>
        <div className="content">
          <div className="top">
            <HeaderLeft />
            {/* 如果是首页(首页才会透明,那么默认是开启 isSearch 的) */}
            <HeaderCenter isSearch={isAlpha || isSearch} searchBarClick={() => setIsSearch(true)} />
            <HeaderRight />
          </div>
          {/* 只在搜索状态下展示 */}
          {/* 如果是首页(首页才会透明,那么默认是开启 isSearch 的) */}
          <SearchAreaWrapper $isSearch={isAlpha || isSearch} />
        </div>

        {/* 遮盖层: 只在搜索状态下展示 */}
        {isSearch && <div className="cover" onClick={() => setIsSearch(false)} />}
      </HeaderWrapper>
    </ThemeProvider>
  )
})

export default AppHeader
